<!-- 快捷话术 -->
<template>
	<div class="quick-talk-container">
		<div class="talk-tab-container">
			<a-tabs v-model:active-key="activeKey" @change="handleChangeTab">
				<a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.tab">
					<div class="quick-talk-wrapper">
						<div class="search-wrapper">
							<a-input-search v-model:value="searchValue" placeholder="搜索快捷话术" enter-button @search="handleSearch" />
						</div>
						<div class="quick-talk-list-container">
							<div class="quick-talk-bubble" v-for="item in quickTalkList" :key="item.key" @click="handleCopy(item.text)">
								<div class="quick-talk-text">
									{{ item.text }}
								</div>
							</div>
						</div>
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>
		<div class="add-btn">
			<a-button type="primary"><PlusOutlined />新建话术</a-button>
		</div>
	</div>
</template>

<script setup>
// ------------------ import ------------------
import { ref, reactive, onMounted, defineEmits } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { getQuickTalkList } from '../api/quickTalk';
import { setQuickTalkIntoInput } from '../api/yupao';
// ------------------ emits ------------------
const emit = defineEmits(['success']);
// ------------------ props ------------------

// ------------------ data ------------------
/** 搜索快捷话术 */
const searchValue = ref('');
/** 当前tab */
const activeKey = ref('1');
/** 快捷话术tab */
const tabs = reactive([
	{
		key: '简历',
		tab: '简历'
	},
	{
		key: '面试',
		tab: '面试'
	},
	{
		key: '拒绝',
		tab: '拒绝'
	},
	{
		key: '业务',
		tab: '业务'
	},
	{
		key: '其他',
		tab: '其他'
	}
]);
const quickTalkList = ref([]);
// ------------------ computed ------------------

// ------------------ methods ------------------
/** 切换tab */
const handleChangeTab = (key) => {
	activeKey.value = key;
	quickTalkList.value = getQuickTalkList(key);
};
/** 搜索快捷话术 */
const handleSearch = (value) => {
	console.log(value);
};
/** 复制话术 */
const handleCopy = (text) => {
	navigator.clipboard.writeText(text);
	setQuickTalkIntoInput(text);
	emit('success', '复制成功！');
};
// ------------------ onMounted ------------------
onMounted(() => {
	handleChangeTab('简历');
});
</script>

<style lang="scss">
.quick-talk-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #333;
	height: 100%;

	.ant-tabs-nav-wrap {
		padding: 0 20px;
	}

	.search-wrapper {
		display: flex;
		justify-content: center;
	}

	.quick-talk-wrapper {
		display: flex;
		flex-direction: column;
		padding: 20px;
		gap: 10px;
		height: 100%;
        background-color: #fff;

		.ant-btn-primary {
			display: flex;
			align-items: center;

			.anticon-search {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 1em;
			}
		}
	}

	.quick-talk-bubble {
		display: flex;
		flex-direction: column;
		padding: 10px;
		background-color: #eff6ff;
		border-radius: 8px;
		border-top-right-radius: 0;
		color: 374151;
		cursor: pointer;
		transition: all 0.3s ease;

		&:hover {
			background-color: #dcebff;
		}
	}
	.quick-talk-text {
		font-size: 13px;
	}

	.quick-talk-list-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-right: 10px;
		height: 450px;
        overflow-x: hidden;
		overflow-y: scroll;
	}

	.add-btn {
		display: flex;
		justify-content: center;
		margin-top: auto;
		padding-bottom: 20px;

		.ant-btn-primary {
			display: flex;
			align-items: center;

			.anticon-plus {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 1em;
			}
		}
	}
}
</style>
